// pages/video/video.js
import request from '../../utils/request';
Page({

    /**
     * 页面的初始数据
     */
    data: {
        videoGroup:[], //导航标签数据
        navId:'', //导航的标识
        videoListData: [], //视频列表数据
        videoId:'', //视频的id标识
        videoPlayTime:[], //记录video播放时长
        isTriggered: false, //标识下拉刷新是否被触发
        offset: 0,  //视频页面默认标签
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        //获取导航数据
        this.getVideoGroup();      
    },

    //获取导航数据
    async getVideoGroup(){
        let result = await request('/video/group/list');
        this.setData({
            videoGroup: result.data.slice(0,14),
            navId: result.data[0].id,
        }); 

        //获取视频列表数据
        this.getVideoList(this.data.navId);  
    },

    //点击切换导航样式
    changNav(event){
        //通过id向event传参的时候如果传递的是number会自动转换为String
        //let navId = event.currentTarget.id; 
        let navId = event.currentTarget.dataset.id;
        this.setData({
            navId,
            videoListData:[] //切换时清空以前的数据
        })

        //显示正在加载
        wx.showLoading({
          title: '视频正在加载',
        })
        //获取当前标签下的视频
        this.getVideoList(navId);
        
    },

    //根据分组ID 获取视频列表
    async getVideoList(navId){
        let result = await request('/video/group',{id: navId,offset:this.data.offset});
        //关闭消息提示框
        wx.hideLoading();
        
        let index = 0;
        let videoList = result.datas.map(item=> {
            item.id= index++;
            return item;
        })

        this.setData({
            videoListData: videoList,
            //关闭下拉刷新
            isTriggered:false
        })
    },

    //点击播放/继续播放的函数
    handlePlay(event){
        /**问题：多个视频可以同时播放的问题
         * 思路：1.在点击播放事件中需要找到上一个播放的视频
         *      2. 在播放新的视频之前关闭上一个正在播放的视频
         *  关键是如何找到上一个视频的实例对象
         *      如何确认点击播放的视频和正在播放的视频不是同一个视频      
         */
        let vid = event.currentTarget.id;

        //性能优化后，因为先显示的是图片。所以下面两步可以省略了
        //this.vid!==vid && this.videoContext && this.videoContext.stop();
        //this.vid = vid;

        //更新data中videoId的状态
        this.setData({
            videoId:vid
        })
        //创建控制video标签的实例对象
        this.videoContext = wx.createVideoContext(vid);

        //判断当前视频是否有播放记录。如果有则跳转至上次播放的位置
        let {videoPlayTime} = this.data;
        let videoItem = videoPlayTime.find(item => item.vid === vid);
        if(videoItem){
            this.videoContext.seek(videoItem.currentTime);
        }
    },

    //监听视频播放进度的回调
    handleTimeUpdata(event){
        let videoTimeObj = {vid:event.currentTarget.id,currentTime:event.detail.currentTime};
        let {videoPlayTime} = this.data;
        //判断videoPlayTime中是否有当前视频的播放记录
        //如果有，在原有的播放记录中修改播放时间为当前的播放时间
        //没有就在数组中添加当前视频的播放对象
        let  videoItem = videoPlayTime.find(item => item.vid === videoTimeObj.vid);
        if(videoItem){ //如果当前有
            videoItem.currentTime = videoTimeObj.currentTime;
        }else{ //之前没有
            videoPlayTime.push(videoTimeObj);
        }
        // 更新播放记录状态
        this.setData({
            videoPlayTime
        })
    },

    //视频播放结束调用
    handleEnd(event){
        //播放结束移除当前视频的播放记录
        let {videoPlayTime} = this.data;        
        videoPlayTime.splice(videoPlayTime.findIndex(item => item.vid === event.currentTarget.id),1);
        this.setData({
            videoPlayTime
        })
    },

    //视频列表下拉刷新回调
    handleRefresher(){
        this.getVideoList(this.data.navId);
    },

    //视频列表上拉触底加载函数
    async handleTolower(){
        //数据分页  1.后端分页     2.前端分页
        this.setData({
            offset:this.data.offset+1
        });
        wx.showLoading({
          title: '视频加载中……',
        })
        let result = await request('/video/group',{id: this.data.navId,offset:this.data.offset});
        let videoListData = this.data.videoListData;
        videoListData.push(...result.datas);
        this.setData({
            videoListData
        })
        wx.hideLoading()
    },

    //跳转至搜索页面
    toSearch(){
        wx.navigateTo({
          url: '/pages/search/search',
        })
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function ({from}) {
        if(from === 'button'){
            return{
                title:'来自button的转发',
                page: '/pages/video/video',
                imageUrl: '/static/images/nvsheng.jpg'
            }
        }else{
            return{
                title:'来自menu的转发',
                page: '/pages/video/video',
                imageUrl: '/static/images/nvsheng.jpg'
            }
        }
        
    }
})